<!-- 地区选择下拉框 -->
<template>
  <div class="AreaSelect-wrap">
    <el-select class="custom-el-select" :value="currentKey" placeholder="请选择" :popper-append-to-body="false" @change="onChange">
      <el-option
          v-for="item in selectData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
  @Component({
    name: 'AreaSelect',
    components: {

    },
  })
  export default class AreaSelect extends Vue {
    @Prop({default: () => [{
        value: '1',
        label: '宝塔区'
      }, {
        value: '2',
        label: 'N95口罩'
      }, {
        value: '3',
        label: 'N95口罩'
      }, {
        value: '4',
        label: 'N95口罩'
      }, {
        value: '5',
        label: 'N95口罩'
      }]
    }) private selectData?: any;
    @Prop() private currentKey?: any;
    @Emit()
    private onSelect(data: any) {
      return data;
    }
    private onChange(e: any) {
      this.onSelect(e);
    }
  }
</script>
<style lang="less" scoped>
  .AreaSelect-wrap{
    position: absolute;
    right: 500px;
    top: 300px;
    width: 200px;
    height: 42px;
    background-color: #002138;
    box-shadow: 0 0 5px 2px rgba(26, 169, 243, 0.6);
    border-radius: 5px;
    border: 1px solid rgba(131, 239, 255, 0.7);
  }
</style>
<style lang="less">
  .custom-el-select{
    .el-input__inner{
      background-color: transparent;
      color: #fff;
      outline: none;
      padding-left: 20px;
      font-size: 18px;
    }
    .el-input.is-focus .el-input__inner{
      border-color: transparent!important;
    }
    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  }
</style>
